import { NavBar, Form, Input, Button, Toast } from "antd-mobile";
import React from "react";
import { registerAPI } from "../pages/services/products";
import { useNavigate } from "react-router-dom";
function Res() {
  const back = () => {
    history.back();
  };
  const [myform] = Form.useForm();
  const navgite = useNavigate();

  return (
    <div>
      <div className="lgheader">
        <NavBar onBack={back}>注册</NavBar>
      </div>
      <Form
        form={myform}
        onFinish={async (v) => {
          //
          await registerAPI({ ...v }).then((res) => {
            if (res.success == true) {
              Toast.show({
                icon: "success",
                content: res.errorMessage,
              });
              navgite("/login", { replace: true }); //跳转
            } else {
              Toast.show({
                icon: "fail",
                content: "用户名已存在",
              });
            }
          });
        }}
      >
        <Form.Item
          name="userName"
          label="用户名"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input placeholder="请输入密码" type="password" />
        </Form.Item>
        <Form.Item name="address" label="地址" help="详情地址">
          <Input placeholder="请输入地址" />
        </Form.Item>
        <Form.Item
          name="mobile"
          label="手机号"
          rules={[{ required: true, message: "手机号码不能为空" }]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Button
          shape="rounded"
          block
          color="primary"
          size="large"
          onClick={() => {
            myform.submit();
            // console.log(1);
          }}
          style={{ marginTop: "2rem" }}
        >
          注册
        </Button>
      </Form>
    </div>
  );
}

export default Res;
